/*کدهای css گردونه نظرات*/

selector .elementor-image-box-content{
    background: rgba(0,0,0,.7);
    padding: 20px 20px 10px 20px;
    border-radius: 20px;
    margin-top: -20px;
}
selector .elementor-image-box-content .instagram{
    font-family: "Peyda";
    display: flex;
    justify-content: center;
    align-items:center;
    gap:10px;
    margin-top: 5px;
    color:#fff;
}
selector .elementor-image-box-img img{
    width: 70%;
}
selector .testimonials{
    transition: .5s ease;
}
selector .pos_1{
    z-index: 5;
    transform: scale(1.1);
}
selector .pos_2{
    z-index: 4;
    filter:blur(3px);
    transform: scale(.8) translate(278px, -24px)
}
selector .pos_9{
    z-index: 4;
    filter:blur(3px);
    transform: scale(.8) translate(-278px, -24px)
}
selector .pos_3{
    z-index: 3;
    filter:blur(8px);
    transform: scale(.65) translate(631px, -56px)
}
selector .pos_8{
    z-index: 3;
    filter:blur(8px);
    transform: scale(.65) translate(-631px, -56px)
}
selector .pos_4{
    z-index: 2;
    filter:blur(10px);
    transform: scale(.55) translate(581px, -96px)
}
selector .pos_7{
    z-index: 2;
    filter:blur(10px);
    transform: scale(.55) translate(-581px, -96px)
}
selector .pos_5{
    z-index: 1;
    filter:blur(12px);
    transform: scale(.55) translate(241px, -105px)
}
selector .pos_6{
    z-index: 1;
    filter:blur(12px);
    transform: scale(.55) translate(-241px, -105px)
}
selector :is(.next-btn-te, .prev-btn-te){
    cursor: pointer;
}



/////////////////////////////////////////////////////////////////////////////////////////////




// کدهای جاوااسکریپت گردونه نظرات
document.addEventListener("DOMContentLoaded",()=>{
    const testimonials = document.querySelectorAll(".testimonials")
    const nextBtnte = document.querySelector(".next-btn-te")
    const prevBtnte = document.querySelector(".prev-btn-te")
    const testimonialsContainer = document.querySelector(".testimonials-container")

    let maxPos = testimonials.length;
    function updateClasses (isNext){
        testimonials.forEach(box=>{
            const currentPos = [...box.classList].find(cls=> cls.startsWith("pos"));
            const numberPos = parseInt(currentPos.split("_")[1]);

            box.classList.remove(currentPos)
            let newPos ;
            if(isNext){
                newPos = numberPos + 1;
            }else{
                newPos = numberPos - 1;
            }
            if(newPos > maxPos){
                newPos = 1; 
            }else if(newPos < 1){
                newPos = maxPos;
            }

            box.classList.add(`pos_${newPos}`)
        })
    }

    nextBtnte.addEventListener('click',()=>{
        updateClasses(true)
    })
    prevBtnte.addEventListener('click',()=>{
        updateClasses(false)
    })

    let touchXStart = 0;
    let touchXEnd = 0;

    function touchUpdate(){
        if(touchXStart > touchXEnd && touchXStart - touchXEnd > 30){
            updateClasses(false)
        }else if(touchXStart < touchXEnd && touchXEnd - touchXStart > 30){
            updateClasses(true)
        }
    }
    testimonialsContainer.addEventListener("mousedown",(e)=>{
        touchXStart = e.x;
    })
    testimonialsContainer.addEventListener("mouseup",(e)=>{
        touchXEnd = e.x;
        touchUpdate()
    })
    testimonialsContainer.addEventListener("touchstart",(e)=>{
        touchXStart = e.changedTouches[0].screenX;
    })
    testimonialsContainer.addEventListener("touchend",(e)=>{
        touchXEnd = e.changedTouches[0].screenX;;
        touchUpdate()
    })

})

